<template>
  <el-tag 
    :type="statusColor" 
    :size="size"
    :effect="effect"
    :class="['resume-status-tag', `status-${status}`]"
  >
    <el-icon v-if="showIcon" class="status-icon">
      <component :is="statusIcon" />
    </el-icon>
    {{ statusLabel }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Edit, 
  Loading, 
  Clock, 
  Check, 
  Close, 
  Warning 
} from '@element-plus/icons-vue'
import { getStatusLabel, getStatusColor } from '@/api/resume'

interface Props {
  status: string
  size?: 'large' | 'default' | 'small'
  effect?: 'dark' | 'light' | 'plain'
  showIcon?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  effect: 'light',
  showIcon: false
})

// 计算属性
const statusLabel = computed(() => getStatusLabel(props.status))
const statusColor = computed(() => getStatusColor(props.status))

const statusIcon = computed(() => {
  const iconMap = {
    'draft': Edit,
    'in_progress': Loading,
    'pending_review': Clock,
    'under_review': Loading,
    'approved': Check,
    'rejected': Close,
    'needs_revision': Warning
  }
  return iconMap[props.status as keyof typeof iconMap] || Edit
})
</script>

<style lang="scss" scoped>
.resume-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  
  .status-icon {
    font-size: 12px;
  }
  
  &.status-approved {
    --el-tag-text-color: var(--color-success);
    --el-tag-bg-color: var(--color-success-light-9);
    --el-tag-border-color: var(--color-success-light-8);
  }
  
  &.status-rejected {
    --el-tag-text-color: var(--color-danger);
    --el-tag-bg-color: var(--color-danger-light-9);
    --el-tag-border-color: var(--color-danger-light-8);
  }
  
  &.status-pending_review {
    --el-tag-text-color: var(--color-primary);
    --el-tag-bg-color: var(--color-primary-light-9);
    --el-tag-border-color: var(--color-primary-light-8);
  }
  
  &.status-needs_revision {
    --el-tag-text-color: var(--color-warning);
    --el-tag-bg-color: var(--color-warning-light-9);
    --el-tag-border-color: var(--color-warning-light-8);
  }
}
</style>
